<template>
  <div v-loading="loading">
    <a-alert message="此配置用于微信平台服务商分账" type="info" show-icon style="margin: 10px 0 20px 15px" />
    <a-form-model
      ref="wechatForm"
      :rules="wechatRules"
      :model="wechatInfo"
      :labelCol="{ span: 3 }"
      :wrapperCol="{ span: 12 }"
    >
      <a-form-model-item label="服务商名称" prop="sp_name">
        <a-input v-model="wechatInfo.sp_name" type="text" />
      </a-form-model-item>
      <a-form-model-item label="服务商APPID" prop="sp_appid">
        <a-input v-model="wechatInfo.sp_appid" type="text" />
      </a-form-model-item>
      <a-form-model-item label="服务商商户号" prop="sp_mch_id">
        <a-input v-model="wechatInfo.sp_mch_id" type="text" />
      </a-form-model-item>
      <a-form-model-item label="服务商密钥" prop="sp_key">
        <a-input v-model="wechatInfo.sp_key" type="text" />
      </a-form-model-item>
      <a-form-model-item label="v3 ApiKey" prop="platform_api_key">
        <a-input v-model="wechatInfo.platform_api_key" type="text" />
      </a-form-model-item>
      <a-form-model-item label="证书编号serial_no" prop="platform_serial_no">
        <a-input v-model="wechatInfo.platform_serial_no" type="text" />
      </a-form-model-item>
      <a-form-model-item label="服务商进件支付费率" prop="sp_key">
        <a-input v-model="wechatInfo.pay_rate" type="text" :addon-after="'%'" />
      </a-form-model-item>
      <a-form-model-item label="apiclient_cert" prop="sp_apiclient_cert">
        <a-input v-model="wechatInfo.sp_apiclient_cert" :autoSize="{ minRows: 4, maxRows: 6 }" type="textarea" />
      </a-form-model-item>
      <a-form-model-item label="apiclient_key" prop="sp_apiclient_key">
        <a-input v-model="wechatInfo.sp_apiclient_key" :autoSize="{ minRows: 4, maxRows: 6 }" type="textarea" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 24 }">
        <a-divider style="margin: 0 0 40px 0" />
        <div style="display: flex; justify-content: center">
          <a-button :loading="btnLoading" type="primary" @click="submitForm" style="margin-right: 8px"> 保存 </a-button>
          <a-button @click="$router.back()"> 取消 </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { getWechatSetting, setWechatSetting } from '@/api/saas/setting'

export default {
  name: 'SaasSettingWechat',
  data() {
    return {
      loading: false,
      btnLoading: false,
      wechatInfo: {
        sp_name: '',
        sp_appid: '',
        sp_mch_id: '',
        sp_key: '',
        sp_apiclient_cert: '',
        sp_apiclient_key: '',
        platform_api_key: '',
        platform_serial_no: '',
        pay_rate: ''
      },
      wechatRules: {
        sp_name: [{ required: true, message: '请输入服务商名称', trigger: 'blur' }],
        sp_appid: [{ required: true, message: '请输入服务商APPID', trigger: 'blur' }],
        sp_mch_id: [{ required: true, message: '请输入服务商商户号', trigger: 'blur' }],
        sp_key: [{ required: true, message: '请输入服务商支付密钥', trigger: 'blur' }],
        sp_apiclient_cert: [{ required: true, message: '请输入服务商apiclient_cert证书', trigger: 'blur' }],
        sp_apiclient_key: [{ required: true, message: '请输入服务商apiclient_key证书', trigger: 'blur' }],
        platform_api_key: [{ required: true, message: '请输入v3接口请求密钥', trigger: 'blur' }],
        platform_serial_no: [{ required: true, message: '请输入证书编号', trigger: 'blur' }],
        pay_rate: [{ required: true, message: '请输入进件支付费率', trigger: 'blur' }]
      },
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData: function () {
      this.loading = true
      getWechatSetting({})
        .then((res) => {
          if (res.code == 0) {
            this.wechatInfo = res.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },
    submitForm: function () {
      this.$refs.wechatForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          setWechatSetting(this.wechatInfo)
            .then((res) => {
              if (res.code == 0) {
                this.$message.success('保存成功！')
              } else {
                this.$message.warning(res.msg ? res.msg : '保存失败！')
              }
            })
            .catch((error) => {
              console.log(error)
            })
            .then(() => {
              this.btnLoading = false
            })
        }
      })
    },
  },
}
</script>

<style scoped>
</style>
